<template>
    <div>
        <div role="treeitem" tabindex="0" draggable="false" 
         :class="active_class1 ? 'el-tree-node is-expanded is-focusable is-current':'el-tree-node is-expanded is-focusable'"
         aria-expanded="true"
         style="margin-left:10px;">
            <div class="el-tree-node__content">
                <span class="el-tree-node__expand-icon el-icon-caret-right expanded"></span>
                <span data-id="553696" class="el-tree-node__label">
                    <span v-if="isFolder" @click="toggle(depart.id)" 
                     :class="active_class2 == depart.id ? '2el-tree-node__label selected':'2el-tree-node__label'">
                        <span class="fa fa-minus-square-o padd" v-show="open"></span>
                        <span class="fa fa-plus-square-o padd" v-show="open==false"></span>
                    </span>
                    <span :class="active_class2 == depart.id ? '2el-tree-node__label selected':'2el-tree-node__label'"
                     v-else><span class="fa fa-minus-square-o padd"></span></span>

                    
                    <span data-id="8"
                     :class="active_class2 == depart.id ? '2el-tree-node__label selected':'2el-tree-node__label'">
                        <span href="" v-if="is_updata==''" @click="get_dep_user(depart.id)">
                            {{'id:' + depart.id }}
                            {{depart.name}}（{{depart.child_count ? depart.child_count : 0}}）
                        </span>
                        <span v-else>
                            <input type="text" :placeholder="depart.name" v-model="depart_name" id="inputTxt"
                             style="width:100px; 
                             border-radius: 4px;
                             border: 1px solid #dcdfe6;
                             font-size: inherit;
                             padding: 0 15px;"
                             @blur="updata_department(depart.id)">
                        </span>
                    </span>
                    
                    
                    <span class="el-tree-node-operation">
                        <a href="" @click.prevent="addChild()">
                            <span class="glyphicon glyphicon-plus padleft" ></span>
                        </a>
                        <a href=""><span class="fa fa-pencil pad" @click.prevent="is_updata=1"></span></a>
                        <a href="" @click.prevent="del_department(depart.id)"><span class="fa fa-trash-o" ></span></a>
                    </span>
                </span>
            </div>
            <div role="group"
             class="el-tree-node__children"
             style="padding-left:15px;"
             v-show="open" v-if="isFolder">
                <treelist v-for="(val, index) in depart.child" :depart="val" :key="index"
                 @add_treelist="add_treelist"
                 @get_dep_user="get_dep_user"
                 @del_department="del_department"></treelist>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import axios from 'axios';
export default {
    name:'Treelist',
    props: ['depart'],
    data() {
        return {
            open: false,    // 展开状态
            depart_id:0,    //部门id
            is_updata:'',
            depart_name:"",
            is_del_department:'1',   //是否删除部门
            input_DEL:'',   //是否删除部门
            active_class1:-1,   //浅蓝底色
            active_class2:-1,   //蓝色字体
        }
    },    
    // 判断是否有孩子
    computed: {
      isFolder: function() {
        return this.depart.child && this.depart.child.length;
      }
    },
    methods: {
        // 展开开关
        toggle(depart_id) {
            if (this.isFolder) {
                this.open = !this.open;  //可以更换展开状态
                this.active_class1 = depart_id;
                this.active_class2 = depart_id;
            }
        },
        // 添加子孩子
        addChild() {
            if (!this.isFolder) {
                this.$emit('add_treelist',this.depart);
                return;
            }
            this.open = true
            if (!this.depart['id']){
                return;
            }
            console.log('Treelist addChild');
            
            let form_data = new FormData();
            form_data.append('dep_top_id',this.depart['id']) ;   // 获取上级分类id
            axios({
                url: this.$api + '/user/add_department/',
                method:'POST',
                headers:{
                    'authorization':this.token,  //携带token
                },
                data:form_data,
            }).then(res=>{
                if(res.data.code==200){
                    this.depart.child.push({
                        name: '新部门',
                        dep_top_id: this.depart['id']
                    })
                }
                console.log(res);
            })
        },
        // 没有孩子的情况下添加树
        add_treelist(depart){
            console.log('Treelist add_treelist');
            
            if (!depart['id']){
                return;
            }
            let form_data = new FormData();
            form_data.append('dep_top_id',depart['id']) ;   // 获取上级分类id
            axios({
                url: this.$api + '/user/add_department/',
                method:'POST',
                headers:{
                    'authorization':this.token,  //携带token
                },
                data:form_data,
            }).then(res=>{
                if(res.data.code==200){
                    Vue.set(depart, 'child', [
                        {
                            name: '新部门',
                            dep_top_id: depart['id']
                        }
                    ]);
                    console.log(res);
                }
            })
        },
        // 删除部门
        del_department(depart_id){
            this.$emit('del_department',depart_id);
        },
        // 获取部门下的人员
        get_dep_user(depart_id){
            this.active_class1 = depart_id;
            this.active_class2 = depart_id;
            this.depart_id = depart_id;
            this.$emit('get_dep_user',depart_id);
        },
        // 修改
        updata_department(depart_id){
            this.is_updata = '';
            // 获取名称和id
            let form_data = new FormData();
            form_data.append('depart_name',this.depart_name);
            form_data.append('depart_id',depart_id);
            axios({
                url:this.$api + '/user/update_department/',
                method:'POST',
                data:form_data,
            }).then(res => {
                console.log(res.data);
            })
        }
    }
}
</script>

<style>

</style>
